<template>
  <a-card :bordered="false" >
    <a-row :gutter="12">
      <a-col :md="24" :lg="7">
        <a-card bordered title="个人信息" >
          <div class="text-center">
            <div class="text-center">
              <img class="w-30 h-30 rounded-1/2 mb-4 inline-block" :src="avatarUrl">
            </div>
            <div class="text-black text-xl">{{ user.nickname }}</div>
          </div>
          <div >
            <p class="ma-0">
              <a-icon class="info" type="mail" />
              <span class="ml-2">{{ user.email }}</span>
            </p>
            <p class="ma-0">
              <a-icon  type="apartment" />
              <span class="ml-2">{{ user.dept?user.dept.deptName:'' }}</span>
            </p>
            <p class="ma-0">
              <a-icon class="info" type="calendar" />
              <span class="ml-2">{{ user.createTime }}</span>
            </p>
          </div>
        </a-card>
      </a-col>
      <a-col :md="24" :lg="17">
        <a-card bordered title="基本资料">
          <a-tabs default-active-key="1">
            <a-tab-pane key="1" tab="修改资料">
              <a-form-model layout="horizontal" labelAlign="right" ref="infoForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="infoForm" :rules="infovalidatorRules">
                <a-form-model-item label="用户账号" prop="username">
                  <a-input placeholder="请输入用户账号" :value="infoForm.username" disabled />
                </a-form-model-item>
                <a-form-model-item label="用户姓名" prop="nickname">
                  <a-input placeholder="请输入用户姓名" v-model.trim="infoForm.nickname" />
                </a-form-model-item>
                <a-form-model-item label="邮箱" prop="email">
                  <a-input placeholder="请输入邮箱" v-model.trim="infoForm.email" />
                </a-form-model-item>
                <a-form-model-item label="简介">
                  <a-textarea placeholder="请输入简介" v-model.trim="infoForm.introduction"/>
                </a-form-model-item>
                <a-form-model-item label="头像">
                  <z-image-upload v-model="infoForm.avatar" :number="1"></z-image-upload>
                </a-form-model-item>
                <a-form-model-item :wrapper-col="{ span: 14, offset: 3 }">
                  <a-button type="primary" @click="updateInfo" :loading="loading">保存</a-button>
                </a-form-model-item>
              </a-form-model>
            </a-tab-pane>
            <a-tab-pane key="2" tab="修改密码" force-render>
              <a-form-model layout="horizontal" labelAlign="right" ref="passwordForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="passwordForm" :rules="passwordvalidatorRules">
                <a-form-model-item label="旧密码" prop="oldPassword">
                  <a-input-password placeholder="请输入旧密码" v-model.trim="passwordForm.oldPassword"  />
                </a-form-model-item>
                <a-form-model-item label="新密码" prop="newPassword">
                  <a-input-password placeholder="请输入新密码" v-model.trim="passwordForm.newPassword"/>
                </a-form-model-item>
                <a-form-model-item label="确认新密码" prop="confirmpassword">
                  <a-input-password placeholder="请输入再次输入密码" v-model.trim="passwordForm.confirmpassword"/>
                </a-form-model-item>
                <a-form-model-item :wrapper-col="{ span: 14, offset: 3 }">
                  <a-button type="primary" @click="updatePassWord" :loading="loading">保存</a-button>
                </a-form-model-item>
              </a-form-model>
            </a-tab-pane>
          </a-tabs>
        </a-card>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import ZImageUpload from '@/components/zz/ZImageUpload'
import { updatepwdwithcheck, updateUser } from '@/services/user'
import { getImgByFileNo } from '@/services/common'
export default {
  name: 'Center',
  components: {
    ZImageUpload
  },
  data() {
    return {
      passwordvalidatorRules: {
        oldPassword: [
          { required: true, message: '请输入旧密码!' }
        ],
        newPassword: [
          // { required: true, message: '请输入新密码!' }
        ],
        confirmpassword: [
          { required: true, message: '请确认新密码!' },
          { validator: this.compareToFirstPassword }
        ]
      },
      infovalidatorRules: {
        username: [
          { required: true, message: '请输入用户账号!' }
        ],
        nickname: [
          { required: true, message: '请输入姓名' }
        ],
        email: [
          { type: 'email', message: '请输入正确的邮箱格式!' }
        ]
      },
      infoForm: {},
      passwordForm: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      avatarUrl: '',
      newPasswordRules: [
        { required: true, message: '请输入新密码!' },
        { validator: this.validatorToOldPassword }
      ],
      loading: false
    }
  },
  computed: {
    ...mapGetters('account', ['user']),
    ...mapState('setting', ['systemConfig'])
  },
  watch: {
    'systemConfig.passwordStrategy': {
      handler(val) {
        this.passwordvalidatorRules.newPassword = [].concat(this.newPasswordRules, val)
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.infoForm = {
      username: this.user.username,
      nickname: this.user.nickname,
      email: this.user.email,
      introduction: this.user.introduction,
      avatar: this.user.avatar
    }
    this.getAvatar()
  },
  methods: {
    getAvatar() {
      if (!this.user.avatar) {
        return
      }
      getImgByFileNo(this.user.avatar).then(url => {
        this.avatarUrl = url
      })
    },
    compareToFirstPassword(rule, value, callback) {
      const form = this.passwordForm
      if (value && value !== form.newPassword) {
        callback('两次输入的密码不一致')
      } else {
        callback()
      }
    },
    validatorToOldPassword(rule, value, callback) {
      const form = this.passwordForm
      if (value && value === form.oldPassword) {
        callback('不能与旧密码相同')
      } else {
        callback()
      }
    },
    updateInfo() {
      this.$refs.infoForm.validate(valid => {
        if (valid) {
          this.loading = true
          updateUser(this.infoForm).then(res => {
            if (res.success) {
              this.$message.success('修改成功')
            }
          }).finally(() => {
            this.loading = false
          })
        }
      })
    },
    updatePassWord() {
      this.$refs.passwordForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.passwordForm.username = this.user.username
          updatepwdwithcheck(this.passwordForm).then(res => {
            if (res.success) {
              this.$message.success('修改成功')
            }
          }).finally(() => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>
